<template>
  <div class="app">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="120px"
    >
      <el-form-item label="挂号费用名称" prop="registeredfeeName">
        <el-input
          v-model="registeredfeeNames"
          placeholder="请输入挂号费用名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="AddDialogVisible=true;"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="infoList">
      <el-table-column label="序号" align="center" prop="regId" />
      <el-table-column
        label="挂号费用名称"
        align="center"
        prop="registeredfeeName"
      />

      <el-table-column
        label="子费用数"
        align="center"
        prop="numberofsub"
      />
      <el-table-column label="金额" align="center" prop="registeredfeeFee" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--添加数据-->

    <el-dialog
      title="提示"
      :visible.sync="AddDialogVisible"
      width="55%"
      :before-close="handleClose"
    >
      <el-form :inline="true" label-width="100px" :model="addForm">
        <el-form-item label="费用名称">
          <el-input v-model="addForm.registeredfeeName"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="addForm.registeredfeeFee"></el-input>
        </el-form-item>
        <el-row v-for="(item, index) in addForm.courseInfo" :key="index">
          <el-form-item label="子费用名称">
            <el-input v-model="item.subRegisteredfeeName"></el-input>
          </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="item.subRegisteredfeeFee"></el-input>
          </el-form-item>

          <el-button
            v-if="index != 0"
            style="margin-left: 5px"
            icon="el-icon-delete"
            @click="delDays(index)"
          ></el-button>
          <el-button
            v-if="index == 0"
            style="margin-left: 5px"
            icon="el-icon-document-add"
            @click="addDays()"
          ></el-button>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click=" AddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 修改数据 -->
    <el-dialog
      title="修改信息"
      :visible.sync="umdateForemVible"
      style="width: 60%; margin: 0 auto"
    >
      <el-form :model="uodatafrm">
        <el-form-item
          label="挂号费用名称"
          :label-width="formLabelWidth"
          style="margin-right: 10%"
        >
          <el-input
            v-model="uodatafrm.registeredfeeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="子挂号费用"
          :label-width="formLabelWidth"
          style="margin-right: 10%"
        >
          <el-input
            v-model="uodatafrm.registeredfeeSubFee"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="金额"
          :label-width="formLabelWidth"
          style="margin-right: 10%"
        >
          <el-input
            v-model="uodatafrm.registeredfeeFee"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="umdateForemVible = false">取 消</el-button>

        <el-button type="primary" @click="editReg">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改数据 -->
  </div>
</template>


<script>
import { delatedata, listInfo2,updatedata,getByid,addtwo} from "@/api/department/Registration";
export default {
  data() {
    return {
      infoList: [],
      queryParams:{},
      // 显示搜索条件
      showSearch: true,
      registeredfeeNames:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      umdateForemVible:false,
      uodatafrm:{
       

      },
      formLabelWidth: "100px",
      AddDialogVisible:false,
      addForm:{
        companyId:"",
        registeredfeeName:"",
        registeredfeeFee:"",
        registeredfeeSubFee:"",
        registeredfeeAggregateAmount:"",
        numberOfSub:"",
        subRegisteredfeeName:"",
        subRegisteredfeeFee:"",
        courseInfo:[{}],
      },
      //循环添加子挂号费的数组
      // courseInfo:{daysArray:[{}]},
      
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listInfo2().then((response) => {
        this.infoList = response.data;
      });
    },
      // 数据修改
  handleEdit(index,row){
    this.umdateForemVible = true
      //console.log(index,rowdata);
        let regId= row.regId;
      getByid(regId).then((response)=>{
        console.log(response+"response");
        // this.uodatafrm.regId=response.data.regId;
        // this.uodatafrm.registeredfeeName=response.data.registeredfeeName;
        // this.uodatafrm.registeredfeeFee=response.data.registeredfeeFee;
        this.uodatafrm=response.data;
        console.log(this.uodatafrm+"u")
      })

  },
  //新增与删除子挂号费
  // addDays() {
	// 	this.addForm.courseInfo.daysArray.push({});
  //   this.addForm.numberOfSub=	this.addForm.courseInfo.daysArray.length;
	// },
	// delDays(index){
	// 	this.addForm.courseInfo.daysArray.splice(index, 1);
	// },
   addDays() {
		this.addForm.courseInfo.push({});
    this.addForm.numberOfSub=	this.addForm.courseInfo.length;
	},
	delDays(index){
		this.addForm.courseInfo.splice(index, 1);
	},


    
    // 新增
    handleAdd(){
       this.addForm.numberOfSub=	this.addForm.courseInfo.length;
     this.AddDialogVisible = false;
     addtwo(this.addForm).then((response)=>{
       if(response.code==200){
        this.getList();
         this.$message({
           message:"添加成功",
           type:"success"
         })
       }
     })

    },
    editReg(){
      updatedata(this.uodatafrm).then((response)=>{
         this.getList();
          if(response.code==200){
             this.umdateForemVible = false;
          this.getList();
               this.$message({
                  message: '成功哦',
                  type: 'success'
                });
          }else{
              this.umdateForemVible = false;
          this.getList();
                this.$message({
                  message:'失败啦',
                  type:'error'
                })
          }
         
      })
    },




    
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.regId;
      console.log(ids+"ids");
      if(ids==null&&ids==undefined &&ids==""){
          this.$alert("删除error");
      }else{
         delatedata(ids).then((response) => {
        this.getList();
        this.$alert("删除成功");
      });
      }
     
    },
    /**对话框关闭 */
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    ,


    //高级查询搜索按钮
   async  handleQuery() {
      //this.queryParams.pageNum = 1;
      console.log(this.registeredfeeNames);
      const query  =    await listInfo2(this.registeredfeeNames)
      console.log(query);
      if(query.code == 200){
         this.infoList = query.data
      }else {
        return new Promise.reject(new Error('this query Error'))
      }
      
    },
  },
};
</script>
